<template>
    <div>
        <div class="crumbs">
            <div class="contentbox">
                <div class="contentsize">委托运营-委托运营房产情况报表</div>
                <div>
                    <router-link target="_blank" :to="{ path: '/printfilebaobiao', query: { id: baobiaoid } }"
                        style="padding-right: 12px">
                        <el-button type="primary" size="small">打印</el-button>
                    </router-link>
                    <el-button @click="cacelsubmitForm('ruleForm')">返回</el-button>
                </div>
            </div>
        </div>
        <div class="container bbtable">
            <div id="print-content">
                <div>
                    <div style="width: 100%;text-align: center;font-size: 24px;font-weight: 700;">委托运营房产情况报表</div>
                    <div style="width: 80%;display: flex;justify-content: space-between;margin: 10px auto;">
                        <div style="font-size: 14px;font-weight: 700;">填报单位：{{ stdwmc }}</div>
                        <div style="font-size: 14px;font-weight: 700;">填报时间：{{ tbyear }}年{{ tbmonth }}月</div>
                    </div>
                </div>
                <el-table :data="bbList" style="width: 100%" :cell-style="{ borderColor: '#000' }"
                    :header-cell-style="{ borderColor: '#000', color: '#000', fontWeight: '700' }" class="exporttable"
                    border>
                    <el-table-column label="序号" align="center" prop="xh" width="40"></el-table-column>
                    <el-table-column label="基本情况" align="center">
                        <el-table-column label="房产地址" align="center" prop="fwdz"></el-table-column>
                        <el-table-column label="建筑面积（㎡）" align="center" prop="jzmj"></el-table-column>
                    </el-table-column>
                    <el-table-column label="经营情况" align="center">
                        <el-table-column label="出租/招租中" align="center" prop="jyzt" width="50"></el-table-column>
                        <el-table-column label="租赁方" align="center" prop="zlf" width="60"></el-table-column>
                        <el-table-column label="租期" align="center" prop="zq" width="50"></el-table-column>
                        <el-table-column :label="tbyear+'年 合同租金（元）'" align="center" prop="htje" width="70"></el-table-column>
                        <el-table-column label="收缴租金（元）" align="center">
                            <el-table-column label="本月应收" align="center" prop="byys"></el-table-column>
                            <el-table-column label="截至本月实收租金" align="center" prop="ssje"></el-table-column>
                            <el-table-column label="欠租时间、金额" align="center" prop="qz"></el-table-column>
                        </el-table-column>
                        <el-table-column label="纠纷/诉讼" align="center" prop="jfss" width="50"></el-table-column>
                    </el-table-column>
                    <el-table-column label="安全使用及巡查情况" align="center">
                        <el-table-column label="房屋拆改" align="center" prop="fwcg" width="50"></el-table-column>
                        <el-table-column label="房屋附属设施设备" align="center" prop="fwfssb" width="50"></el-table-column>
                        <el-table-column label="消防设施设备是否满足防火要求" align="center" prop="xfsb" width="60"></el-table-column>
                        <el-table-column label="本月安全巡查次数" align="center" prop="xccs"></el-table-column>
                    </el-table-column>
                    <el-table-column label="修缮情况" align="center">
                        <el-table-column label="是否修缮" align="center" prop="sfxs" width="50"></el-table-column>
                        <el-table-column label="修缮费支出（元）" align="center" prop="xsf" width="70"></el-table-column>
                        <el-table-column label="工程是否完工" align="center" prop="gczt" width="50"></el-table-column>
                    </el-table-column>
                    <el-table-column label="备注" prop="bz" align="center"></el-table-column>
                </el-table>
                <div style="margin-top: 10px;font-size: 12px;">
                    <div>填表说明：</div>
                    <div>
                        1.“收缴租金”是指截至本月底欠租情况和月租金的收缴情况，如收缴本月租金，在“收缴租金”—“截至本月实收租金”项下填{{ tbyear }}年截至本月底累计实收租金；如有欠租，在“收缴租金”—“欠租时间、金额”项下填写所欠租金的租期和所租金数额。
                    </div>
                    <div>2.“是否涉诉”是指房屋是否存在诉讼情况，如有诉讼，需再在“是否涉诉”项下，填“有”，且需另附情况说明；</div>
                    <div>3.“房屋拆改”是指房产是否存在拆除、改建、扩建和装修改造等情况；“房屋附属设施设备”是指房屋附属设施设备是否存在添加和改造的情况，如选“无”以外选项，需另附情况说明；</div>
                    <div>4.“消防设施设备是否满足防火要求”是指该房屋消防设施设备，在数量、种类、有效性等方面满足防火要求及规范。</div>
                    <div>5.“是否修缮”是指本月是否有房产修缮工程开工；“修缮费支出” 是指本月修缮费用实际支出金额；“工程是否完工”是指本月是否有修缮工程完工的情况。</div>
                    <div>6. 本报表每月30日之间前报送，须加盖填报单位公章。</div>
                </div>
                <el-table :data="filetable" style="width: 100%;margin-top: 10px;" border max-height="150">
                    <el-table-column prop="name" label="文件名称" align="center" :show-overflow-tooltip="true"> </el-table-column>
                    <el-table-column prop="wjmc" label="文件预览" align="center"  :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <router-link target="_blank"
                                :to="{ path: '/perviewfile', query: { id: scope.row.id, type: scope.row.suffix } }"
                                style="color: #008A94;"
                                v-if="scope.row.suffix == '.docx' || scope.row.suffix == '.doc' || scope.row.suffix == '.xls' || scope.row.suffix == '.xlsx'">{{
                        scope.row.name }}<i class="el-icon-document el-icon--right"></i>
                            </router-link>
                            <el-button type="text" size="small"
                                @click="redownload(scope.row.id, scope.row.name, scope.row.suffix)"
                                v-else>{{ scope.row.name }}<i class="el-icon-document el-icon--right"></i></el-button>
                        </template>
                    </el-table-column>
                    <el-table-column prop="wjmc" label="文件下载" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-button type="text" size="small"
                                @click="downloadfile(scope.row.id, scope.row.name, scope.row.suffix)"
                                style="color:blue;text-decoration: underline">{{ scope.row.name }}</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

        </div>
    </div>
</template>

<script>
import { wtbbdetails,redownload,download } from '@/api/index';
import fileType from "../vo/filetype";
export default {
    name: 'baobiaolist',
    data() {
        return {
            bbList: [],
            tbyear: '',
            tbmonth: '',
            stdwmc: '',
            baobiaoid:'',
            filetable: [],//文件列表
        }
    },
    methods: {
        // 取消
        cacelsubmitForm() {
            this.$router.go(-1);
        },
        wtbbdetails(data) {
            wtbbdetails(data).then(res => {
                this.tbyear = res.data.year
                this.tbmonth = res.data.month
                this.stdwmc = res.data.stdwmc
                this.bbList = res.data.wtbbnr
                this.filetable = res.data.fj
                console.log(res)
            })
        },
        // 下载文件
        downloadfile(id, name, type) {
            console.log(id)
            let filetype = fileType[type];
            let data = {
                fileid: id
            }
            download(data).then(res => {
                const link = document.createElement('a');
                let blob = new Blob([res], {
                    type: filetype
                });
                link.style.display = 'none';
                //设置连接
                link.href = URL.createObjectURL(blob);
                link.download = name;
                document.body.appendChild(link);
                //模拟点击事件
                link.click();
                console.log(res)
            })
        },
        // 文件预览
        redownload(id, name, type) {
            let filetype = fileType[type];
            let data = {
                fileid: id
            }
            redownload(data).then(res => {
                console.log(res)
                let blob = new Blob([res], {
                    type: filetype
                });
                let url = window.URL.createObjectURL(blob);
                window.open(url, '_blank')
            })
        },
    },
    mounted() {

    },
    created() {
        this.baobiaoid=this.$route.params.id
        console.log(this.$route.params)
        let data = {
            id: this.$route.params.id
        };
        this.wtbbdetails(data)
    }
}
</script>

<style scoped>
.container {
    /* height: calc(100vh - 260px); */
    overflow: hidden;
}

.exporttable {
    border: solid 1px #000;
}

.crumbs {
    background-color: #fff;
    padding: 20px 20px;
}

.indexTitle {
    margin-bottom: 20px;
}

.contentbox {
    display: flex;
    justify-content: space-between;
}

.contentsize {
    font-size: 18px;
    font-weight: 700;
    line-height: 32px;
    color: #606266;
}
</style>